<template>
	<div class="Config">
		<div class="Config_tabs">
			<div :class="{'Config_tabs_active':tabsIndex==item.value && tabs.filter(item=>item.show) .length>1}"
				v-for="item in tabs" :key="item.value" @click="tabsIndex=item.value" v-if="item.show">
				{{item.title}}
			</div>
		</div>
		<el-form class="Config_content" size="medium" label-position="top">
			<!-- {{fieldConfig}} -->
			<el-form-item v-for="(item,index) in fieldConfig" :key="index+100" :label="item.title" v-if="tabsIndex==0">
				<el-radio-group v-model="item.value" v-if="item.type=='radio'" @change="change($event,item.field,'field')">
					<el-radio-button v-for="(v,i) in item.options" :key='i' :label="v.label">
						{{v.label}}
					</el-radio-button>
				</el-radio-group>
				<el-select v-model="item.value" v-else-if="item.type=='select'" @change="change($event,item.field,'field')">
					<el-option v-for="(v,i) in item.options" :key='i' :label="v.label" :value="v.value">
						{{v.label}}
					</el-option>
				</el-select>
				<el-input v-model="item.value" v-else-if="item.type=='input'" @input="change($event,item.field,'field')" />
				<el-slider v-model="item.value" v-else-if="item.type=='slider'" @input="change($event,item.field,'field')" :max="24" :marks="{12:''}" />
				<components :is="'el-' + item.type" v-model="item.value" @change="change($event,item.field,'field')"v-else />
			</el-form-item>
			<el-divider v-if="tabsIndex==0"></el-divider>
			<el-form-item v-for="(item,index) in $data[['otherConfig','formConfig'][tabsIndex]]" :key="index" :label="item.title">
				<el-radio-group v-model="item.value" v-if="item.type=='radio'" @change="change($event,item.field,tabsIndex==1?'form':'other')">
					<el-radio-button v-for="(v,i) in item.options" :key='i' :label="v.label">
						{{v.label}}
					</el-radio-button>
				</el-radio-group>
				<el-select v-model="item.value" v-else-if="item.type=='select'" @change="change($event,item.field,tabsIndex==1?'form':'other')">
					<el-option v-for="(v,i) in item.options" :key='i' :label="v.label" :value="v.value">
						{{v.label}}
					</el-option>
				</el-select>
				<components :is="'el-' + item.type" v-model="item.value" @change="change($event,item.field,tabsIndex==1?'form':'other')"  v-else />
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import formConfig from '../config/form.js'
	import fieldConfig from '../config/field.js'
	const form = JSON.parse(localStorage.getItem('formConfig'))
	const field = JSON.parse(localStorage.getItem('fieldConfig'))
	export default {
		data() {
			return {
				fieldConfig:field || fieldConfig(),
				tabsIndex: 1,
				tabs: [{
					title: '组件配置',
					value: 0,
					show: false
				}, {
					title: '表单配置',
					value: 1,
					show: true
				}],
				formConfig: form || formConfig(),
				otherConfig: []
			}
		},
		watch:{
			fieldConfig(val){
				console.log(val)
			},
		},
		methods: {
			init(item, tabsShow = false) {
				console.log(item)
				this.tabs[0].show = tabsShow
				this.tabsIndex = tabsShow ? 0 : 1
				if(!item) return
				const field=fieldConfig()
				this.fieldConfig.map(o=>{
					for(var key in item.rule){
						if(o.field==key){
							this.$set(o,'value',item.rule[key])
						}
					}
				})
				console.log(this.fieldConfig)
				this.otherConfig = item.props
			},
			change(e,key,type) {
				console.log(e,key,type)
				this.$emit('change',{value:e,key,type},this.formConfig)
				// console.log(e, this.formConfig,this.otherConfig)
				// this.$emit('change', {
				// 	form:this.formConfig,
				// 	field:this.fieldConfig,
				// 	other:this.otherConfig
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	.Config {
		width: 300px;
		height: 100%;
		&_tabs {
			height: 40px;
			line-height: 40px;
			display: flex;
			text-align: center;

			>div {
				width: 100%;
				border-bottom: 1px solid #ddd;
				cursor: pointer;
			}

			&_active {
				border-bottom: 2px solid var(--xw-color-primary) !important;
			}
		}

		&_content {
			padding: 0 15px;
			height: calc(100% - 40px);
			overflow-y: auto;
		}
	}
</style>